
<script>
        /*============================会员的性别统计图=======================*/
        var mySex= echarts.init(document.getElementById("vip_sex"));
        var option={
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c}人 ({d}%)"
            },
            series: [
                {
                    name: '本网站的统计',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {   value:{{$persex['女']}},
                            name: '女',
//                            改变扇区的颜色
                            itemStyle:{
                                normal:{color:'red'}
                            }
                          },

                        {   value:{{$persex['男']}},
                            name: '男',
                            itemStyle:{
                                normal:{color:'#0F88EB'}
                            }
                        }

                    ]
                }
            ]
        };
        mySex.setOption(option);
        window.addEventListener("resize", function () {
            setTimeout("mySex.resize()",100);
        });
    </script>
    <script>
        /*=============会员统计人数的环形图========================*/
        var myNum = echarts.init(document.getElementById("vip_num"));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} 人"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['总人数']
            },
            series: [
                {
                    name: '网站统计数据',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#0F88EB'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:
                        [{value:{{$persons}}, name: '会员总人数'}]
                }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myNum.setOption(option);
        //添加定时器监听事件,南丁格尔图随着浏览器屏幕的大小的变化而变化
        window.addEventListener("resize", function () {
            setTimeout("myNum.resize()",100);
        });

    </script>
    <script>
        /*========================会员年龄分布图============================*/
        var myAge= echarts.init(document.getElementById("vip_age"));
        myAge.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} 人 ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left'
                // data: ['15岁以下','15岁到20岁','20岁到30岁','30岁到50岁','50岁以上']
            },
            series: [
                {
                    name: '本网站统计数据',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20'
                            }
                        }
                    },

                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value:{{$count15}}, name: '15岁以下',
                            itemStyle:{
                                normal:{color:'#0F88EB'}
                            }},
                        {value:{{$count20}}, name: '15岁到20岁',
                            itemStyle:{
                                normal:{color:'#0F00EB'}
                            }},
                        {value:{{$count30}}, name: '20岁到30岁',
                            itemStyle:{
                            normal:{color:'green'}
                        }},
                        {value:{{$count50}}, name: '30岁到50岁',
                            itemStyle:{
                                normal:{color:'#0F88EB'}
                            }},
                        {value:{{$count51}}, name: '50岁以上',
                            itemStyle:{
                                normal:{color:'red'}
                            }}
                    ]
                }]
        });
        window.addEventListener("resize", function () {
            setTimeout("myAge.resize()",100);
        });
    </script>